<template>
  <div>
    <el-row class="nav">
      <span class="font-weight">其他参数设置</span>
    </el-row>
    <el-divider></el-divider>
    <el-form ref="form"
             :model="form"
             :label-position="left"
             :label-width="labelWidth">
      <!-- 工单催单 -->
      <el-form-item v-for="(item,index) in nonSysDictParamList"
                    :key='index'
                    :label="item.name+'：'">
        <span>催单时间间隔&nbsp;&nbsp;</span>
        <el-select v-model="item.value"
                   @change="reminderTime(item)"
                   size="mini"
                   clearable
                   placeholder="请选择">
          <el-option v-for="item in timeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 菜单状态 -->
      <el-form-item v-for="(item,index) in buttonPermissionList"
                    :key='index'
                    :label="item.dictName+'：'">
        <el-radio-group v-if="item.dictCode==='order_withdraw'"
                        v-model="item.status"
                        @change="changeStatus(item,item.status)">
          <p>{{item.status}}</p>
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
        <el-radio-group v-if="item.dictCode==='sub_order_view'"
                        v-model="item.status"
                        @change="changeStatus(item,item.status)">
          <el-radio label="0">展示</el-radio>
          <el-radio label="1">隐藏</el-radio>
        </el-radio-group>
        <span v-if="item.dictCode == 'sub_order_view'">&nbsp;&nbsp; (设置工单列表中是否展示子工单)</span>
        <el-radio-group v-if="item.dictCode==='smart_fill_form'"
                        v-model="item.status"
                        @change="changeStatus(item,item.status)">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 详情属性 -->
      <el-form-item label="详情属性：">
        <el-checkbox-group v-model="form.detailsCheckList">
          <el-checkbox v-for="(item,index) in detailViewList"
                       :key='index'
                       :checked="item.status ==='0'?true:false"
                       @change="changeChoose(item)"
                       :label="item.dictName"
                       :value="item.id">
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="消息模板自定义字段配置：">
        <el-button type="button"
                   @click="dialogVisibleFun"
                   class="el-button el-button--primary el-button--medium h30Btn ">配置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="配置列表"
                v-dialogDrag
               :visible.sync="dialogVisible"
               :close-on-click-modal="closeModel"
               width="50%">
      <avue-form :option="option"
                 v-model="obj">
      </avue-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="sysDictAddFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectParamSetList, updateSysDict, updateNoSysDictParams } from "@/api/SysDictController.js"
import { getDictDetailListByPcode, sysDictAdd } from "@/api/setNotice.js"
export default {
  data () {
    return {
      closeModel: false,
      test: window.CONFIG.test,
      obj: {
        dynamic: []
      },
      option: {
        labelWidth: 0,
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              // headerAlign: 'center',
              rowAdd: (done) => {
                done({
                  dictCode: "",
                  dictName: "",
                  pid: "43"
                });
              },
              rowDel: (row, done) => {
                done();
              },
              column: [{
                width: 200,
                span: 12,
                label: '唯一标识名称',
                prop: "dictCode",
              }, {
                width: 200,
                span: 12,
                label: '中文名',
                prop: "dictName",
              }]
            }
          }]
      },
      // labelWidth: '100px',
      dialogVisible: false,
      nonSysDictParamList: [],
      detailViewList: [],
      buttonPermissionList: [],
      form: {
        detailsCheckList: [],
        status: '0'
      },
      timeOptions: [
        {
          value: '1',
          label: '1分钟'
        },
        {
          value: '2',
          label: '2分钟'
        },
        {
          value: '5',
          label: '5分钟'
        },
        {
          value: '10',
          label: '10分钟'
        }, {
          value: '20',
          label: '20分钟'
        }, {
          value: '30',
          label: '30分钟'
        }, {
          value: '60',
          label: '1小时'
        }, {
          value: '120',
          label: '2小时'
        },
      ]
    }
  },
  mounted () {
    this.selectParamSetListFun()
  },
  methods: {
    dialogVisibleFun () {
      this.getDictDetailListByPcodeList()
      this.dialogVisible = true
    },
    getDictDetailListByPcodeList () {
      getDictDetailListByPcode('msg_template_param').then((res) => {
        if (res.data.retCode === 200) {
          let datas = res.data.data
          this.obj.dynamic = datas.filter(item => {
            return item.isSys != 'Y'
          })
          console.log(this.obj.dynamic)
          // this.obj.dynamic = datas
        }
      })
    },
    sysDictAddFun () {
      let params = this.obj.dynamic
      sysDictAdd({ sysDictChildrenDtoList: params }).then((res) => {
        if (res.data.retCode === 200) {
          this.dialogVisible = false
        }
      })
    },
    changeChoose (val) {
      let status = ''
      if (this.form.detailsCheckList.includes(val.dictName)) {
        status = '0'
      } else {
        status = '1'
      }
      this.updateSysDictFun(val, status)
    },
    changeStatus (val, status) {
      this.updateSysDictFun(val, status)
    },
    reminderTime (val) {
      this.updateNoSysDictParamsFun(val)
    },
    updateSysDictFun (val, status) {
      let params = {
        id: val.id,
        status: status + '',
      }
      updateSysDict(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      })
    },
    updateNoSysDictParamsFun (val) {
      let params = {
        code: val.code,
        value: val.value,
      }
      updateNoSysDictParams(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      })
    },
    selectParamSetListFun () {
      selectParamSetList().then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.nonSysDictParamList = data.data.nonSysDictParamList
          this.detailViewList = data.data.detailViewList
          // this.buttonPermissionList = data.data.buttonPermissionList
          // 注释智能录单
          data.data.buttonPermissionList.forEach(item => {
            if (item.dictCode !== 'smart_fill_form') {
              this.buttonPermissionList.push(item)
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped>
>>> .el-table__header {
  width: 100% !important;
}
>>> .el-table__body {
  width: 100% !important;
}
>>> .el-dialog__title,
>>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
>>> .el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
>>> .el-button--mini {
  margin: 0;
}
>>> .el-icon-delete {
  margin-right: 0px;
}
</style>